<template>
  <div class="design-template">
    <div class="title">{{ title }}</div>
    <div class="template">
      <div class="icon" @click="collectTemplate" :class="{'icon-active': collected === true}"></div>
      <div class="picture">
        <img
          :src="imgUrl"
          mode="scaleToFill"
          alt="图片"
        />
      </div>
      <div class="details" @click="sendDetails">点击查看详情</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const { imgUrl,title,id,arr } = defineProps(['imgUrl','title','id','arr']);
const router = useRouter();
const collected = ref(false)
function sendDetails(){
  const message = arr.filter((item: any) => item.id === id)[0]?.prompt || '';
  const type = 'QuestionGenerator'; // 根据需求调整 type
  router.push({
    name: 'chat',
    query: {
      type: type,
      message: message
    }
  });
  console.log(1)
}
function collectTemplate(){
   collected.value = !collected.value
}
</script>

<style scoped lang="less">
@import url('@/views/design-template/component/index.less');
</style>